/**
 * 如果搭配useImperativeHandle，可以自定义给父组件或者其他组件可操作的数据
 */

import React, { useRef, useImperativeHandle, forwardRef } from "react"

const Count = React.memo(
  forwardRef((props, ref) => {
    const inputRef = useRef("")

    useImperativeHandle(ref, () => {
      return {
        focus: function () {
          console.log("my focus")
          inputRef.current.focus()
        }
      }
    })

    return <input ref={ref} />
  })
)

export default function Demo2() {
  const inputRef = useRef()

  function handleDOM() {
    inputRef.current.focus()
  }

  return (
    <div>
      <h4>useRef搭配useImperativeHandle自定义暴露ref数据：</h4>
      <button onClick={handleDOM}>聚焦</button>
      <Count ref={inputRef} />
    </div>
  )
}
